<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="popup.css" />
<script src="popup_util.js"></script>
</head>
<body style="overflow-x:hidden;">
<script src="analytics.js"></script>
<script src="desktop_notifier.js"></script>
<div id="wrap">
	<div id="iconbar">
		<img src="icon48.png" style="
			padding: 0 10px;
			border:1px solid white;
			-webkit-box-reflect:below 1px
			-webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(0.4, transparent), to(white));"
		>
	</div>
	<div id="textbar">
		<span id="popupText"></span>
	</div>
</div>

<div id="bottomBar">
	<div id="title">
		<h3> </h3>
		<h3>DevFest on Twitter</h3>
		<h3> </h3>
	</div>
	<ol id="timeline" />
</div>
<ol id="template">
  <li>
	<div class="thumbnail">
	  <a>
		<img />
	  </a>
	</div>
	<div class="text">
	  <a></a>
	  <span></span>
	</div>
	<div id="translation" class="text" align="right">
	  <a></a>
	  <span></span>
	</div>
	<div class="clear"></div>
  </li>
</ol>

<script language="javascript">
var bg; // background page

// timeline attributes
var timeline;
var template;
var link;
var image;
var author;
var content;

onload = setTimeout(init, 0); // workaround for http://crbug.com/24467

// initialize timeline template
function init() {
	chrome.browserAction.setBadgeText({text: ''});
	bg = chrome.extension.getBackgroundPage();
	bg.unreadCount = 0;

	timeline = document.getElementById('timeline');
	template = xpath('//ol[@id="template"]/li', document);
	link = xpath('//div[@class="thumbnail"]/a', template);
	image = xpath('img', link);
	author = xpath('//div[@class="text"]/a', template);
	content = xpath('//div[@class="text"]/span', template);
	translated = xpath('//div[@id="translation"]/span', template);	update();
}

// update display
function update() {
	var user;
	var url;
	var item;

	for (var i in bg.tweets) {
		//alert(bg.tweets[i].from_user);
		user = bg.tweets[i].from_user;
		user_url = 'http://twitter.com/' + bg.tweets[i].from_user;
		tweet_url = 'http://twitter.com/' + bg.tweets[i].from_user + '/status/' + bg.tweets[i].id;

		// thumbnail
		link.title = bg.tweets[i].from_user;
		link.href = openInNewTab(tweet_url);
		image.src = bg.tweets[i].profile_image_url;
		image.alt = bg.tweets[i].from_user;

		// text
		author.href = openInNewTab(user_url);
		author.innerHTML = bg.tweets[i].from_user;
		content.innerHTML = linkify(bg.tweets[i].text);
		//tranlate link
		translated.innerHTML = translateLink(bg.tweets[i].text);

		// copy node and update
		item = template.cloneNode(true);
		timeline.appendChild(item);
	}
	if(i > 0)
	{
		showStuff('title');
	}
	else
	{
		hideStuff('title');
	}
}

function showStuff(id)
{
	document.getElementById(id).style.display = 'block';
}

function hideStuff(id)
{
	document.getElementById(id).style.display = 'none';
}

function change()
{
	var bgPage = chrome.extension.getBackgroundPage();
	bgPage.updateTime();
	document.getElementById("popupText").innerHTML = '<h3>' + localStorage["countdownText"] + '</h3>';
	hideStuff('title');
}
change();
</script>
</body>
</html>
